<template>
    <div class="login_register_Container">
        <div class="nav">
            <div class="navinner">
                <div @click="backToHome">
                    <img style="width:110px;height:75px;" :src="logoinfos.logo" />
                </div>
                <div>casso-shop</div>
            </div>
        </div>
        <div class="content">
            <div class="forkBtn">
                <div @click="selectLogin" :class="flag?'bindbtnclass':'bindbtnclass2'">登录</div>
                <div @click="selectRegister" :class="flag?'bindbtnclass2':'bindbtnclass'">注册</div>
                <!-- <el-button size="small" @click="loginComponents" type="primary">登录</el-button>
                <el-button size="small" @click="registerComponents" type="primary">注册</el-button>-->
            </div>
            <div class="componengtsContainer">
                <transition mode="out-in">
                    <component :is="componentId"></component>
                </transition>
            </div>
        </div>
    </div>
</template>



<script>
// import loginregister from "./login.vue";
// import register from "./register.vue";
const loginregister = () => import('./login.vue')
const register = () => import('./register.vue')
export default {
    data() {
        return {
            componentId: null,
            flag: true,
            logoinfos: {}
        };
    },
    components: {
        loginregister,
        register
    },
    methods: {
        //返回首页
        backToHome() {
            this.$router.push("home");
        },
        // 选择登陆
        selectLogin() {
            this.flag = true;
            this.componentId = loginregister;
        },
        // 选择注册
        selectRegister() {
            this.flag = false;
            this.componentId = register;
        },
        getLogo() {
            this.$ajax.get("logos/").then(res => {
                if(res.data.results.length>0){
                    this.logoinfos = res.data.results.pop();
                }else{
                    this.logoinfos = {}
                }
            });
        }
    },
    mounted() {
        this.componentId = loginregister;
        // 获取logo图片
        this.getLogo();
    }
};
</script>


<style lang="scss" scoped>
.bindbtnclass {
    background-color: #409eff;
    // border-top-right-radius: 20px;
    // border-top-left-radius: 20px;
    color: #fff;
    opacity: 1;
}

.bindbtnclass2 {
    background-color: #ccc;
    opacity: 0.5;
}
.login_register_Container {
    width: 100%;
    margin: 0 auto;
    .nav {
        width: 100%;
        height: 70px;
        // background-color: #ccc;
        .navinner {
            width: 60%;
            height: 100%;
            line-height: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: flex-start;
            div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                font-size: 16px;
                margin-left: 25px;
                cursor: pointer;
            }
        }
    }
    .content {
        width: 600px;
        margin: 100px auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        // border: 1px solid red;
    }
    .forkBtn {
        display: flex;
        height: 65px;
        justify-content: space-between;
        border: 1px solid #ccc;
        margin: 0 auto;
        div {
            width: 50%;
            height: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            transition: all linear 0.2s;
            cursor: pointer;
            // background-color: #ccc;
        }
        div:hover {
            background-color: #409eff;
            // border-top-right-radius: 20px;
            // border-top-left-radius: 20px;
            color: #fff;
        }
    }
    .componengtsContainer {
        width: 400px;
        display: flex;
        margin: 0 auto;
        justify-content: center;
    }
}

.v-enter {
    opacity: 0;
    transform: translateX(10%);
}

.v-leave-to {
    opacity: 0;
    transform: translateX(-10%);
}

.v-enter-active,
.v-leave-active {
    transition: all 0.3s ease;
}
</style>